<template>
    <div class="controller" :style="{ bottom:($route.meta.showTab ? '50px':'0px')}" >
        <!-- 全局播放器 controller -->
        <div class="leimg">
          <img  :src="controlList[conindex].al.picUrl" alt="" >
        </div> 
        <div class="musciname" @click="isshow = !isshow">
          {{ controlList[conindex].name }}
        </div>
        <div @click="playmusic">
            <div class="playbtn">
              <i v-if="paused" class="iconfont icon-sanjiaoright"></i>
              <i v-else class="iconfont icon-zanting"></i>
            </div>
        </div>
        <div class="more">
            <i class="iconfont icon-gengduo"></i>
        </div>
        <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${controlList[conindex].id}.mp3`"></audio>
        
        <!-- 音乐播放详情 -->
        <playMusic @back="isshow = !isshow" v-show="isshow" :musicinfo="controlList[conindex]" :playmusic="playmusic" :paused="paused"></playMusic>
    </div>
</template>

<script>
import playMusic from 'components/playmusic/playmusic'

import { mapState ,mapMutations } from 'vuex'
export default {
    name:'controller',
    components:{
      playMusic
    },
    computed:{
        ...mapState('playcontroller',['controlList','conindex'])
    },
    data(){
      return {
        // 控制icon的替换
        paused:true,
        // 控制音乐播放详情页面是否展示
        isshow: false,
        // 计时器的id
        setid:null,
      }
    },
    mounted(){
      console.log( this.controlList[this.conindex].id )
      this.$store.dispatch('playcontroller/getLyrics',{id:this.controlList[this.conindex].id})
    }, 
    updated(){
        // 歌曲切换后数据发生改变后  要重新获取到新的歌词
        // console.log(this.controlList[this.conindex].id)
        this.$store.dispatch('playcontroller/getLyrics',{id:this.controlList[this.conindex].id})
    },
    methods:{
        ...mapMutations('playcontroller',['setCurrentTime']),

        // 播放和暂停音乐的方法
        playmusic(){
            console.log( this.$refs.audio.currentTime)
            // paused  会返回 audio的播放状态  true代表播放  false代表暂停
            if( this.$refs.audio.paused ){
              this.$refs.audio.play()
              this.paused = false
              this.upcurrenttime()
            }else{
              this.$refs.audio.pause()
              this.paused = true
              clearInterval(this.setid)
            }
        },
        // 通过计时器 将音乐的播放时间 存到vuex中
        upcurrenttime(){
          this.setid = setInterval(() => {
              this.setCurrentTime( this.$refs.audio.currentTime*1000 )
           },1000)
        }
    },
};
</script>

<style scoped lang="scss">
.controller{
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: .05rem .1rem;
  border: 1px solid #eee;
  .leimg{
    img{
      width: .4rem;
      height: .4rem;
      border-radius: .1rem;
    }
  }
  .musciname{
    padding: .1rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .playbtn{
    padding: .08rem;
    border: 1px solid #eee;
    border-radius: 50%;
  }
  .more{
    padding: .1rem;
    margin-left: .1rem;
    .icon{
      color: #B3B3B3;
    }
  }



}


</style>
